<!-- src/components/logSearch/LogSearchForm.vue -->
<template>
  <el-card class="search-form" shadow="hover">
    <el-form :model="formData" label-position="top">
      <el-row :gutter="20">
        <el-col :md="6" :sm="12" :xs="24">
          <el-form-item label="关键字">
            <el-input
              v-model="formData.message"
              placeholder="关键信息"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <el-form-item label="源IP">
            <el-input v-model="formData.src_ip" placeholder="源IP" clearable />
          </el-form-item>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <el-form-item label="目标IP">
            <el-input
              v-model="formData.dst_ip"
              placeholder="目标IP"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <el-form-item label="日志级别">
            <el-select
              v-model="formData.log_level"
              placeholder="全部"
              clearable
            >
              <el-option label="全部" value="" />
              <el-option label="INFO" value="INFO" />
              <el-option label="WARNING" value="WARNING" />
              <el-option label="ERROR" value="ERROR" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <el-form-item label="集群">
            <el-select
              v-model="formData.cluster"
              filterable
              clearable
              placeholder="集群"
            >
              <el-option
                v-for="item in computedClusterNames"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="6" :sm="12" :xs="24">
          <el-form-item label="日期">
            <el-date-picker
              v-model="formData.log_time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <div class="form-actions">
              <el-button @click="handleReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                检索
              </el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { Section } from '@/core/components'
import useApi from '@/core/apiStore'
import { chain } from 'lodash'

const apiStore = useApi()

interface SearchFormData {
  message?: string
  src_ip?: string
  dst_ip?: string
  log_level?: string
  log_type?: string
  log_time?: [string, string]
}

const emit = defineEmits<{
  (e: 'search', params: SearchFormData): void
  (e: 'reset'): void
}>()

const formData = reactive<SearchFormData>({
  message: '',
  src_ip: '',
  dst_ip: '',
  log_level: '',
  log_type: '',
  log_time: ['', ''],
})

const handleSearch = () => {
  emit('search', { ...formData })
}

const handleReset = () => {
  Object.keys(formData).forEach(key => {
    if (key === 'dateRange') {
      formData[key] = ['', '']
    } else {
      formData[key as keyof SearchFormData] = ''
    }
  })
  emit('reset')
}

onMounted(() => {
  apiStore.getClusters()
})
const computedClusterNames = computed(() => {
  const clusters = apiStore.apiStates.getClusters.data.data.clusters
  console.log('clusters', clusters)
  return chain(clusters)
    .map(item => ({ label: item.name, value: item.name }))
    .value()
})
</script>

<style scoped>
.search-form {
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.el-form-item {
  margin-bottom: 16px;
}
</style>
